<template>
	<navigatorComp title="纪念视频" bgcColor="#121512" fontColor="#fff">
		<template #rightWrap>
			<view class="edit" @click="changeStatus" v-if="isSelf">
				{{ isEdit ? '完成' : '编辑' }}
			</view>
		</template>
	</navigatorComp>

	<view class="content">
		<!-- <view class="memoryVideo_uploadBtn" @click="uploadVideo" v-if="isSelf">
			<image src="http://112.124.50.179:8888/imgs/home/video.png" mode=""></image>
			<text>上传视频</text>
		</view> -->
		<view class="display_flex" style="margin-top: 32rpx" v-if="isSelf">
			<view class="memoryVideo_uploadBtn" @click="uploadVideo">
				<image src="http://112.124.50.179:8888/imgs/home/image.png" mode=""></image>
				<text>上传视频</text>
			</view>
			<view class="edit_box" @click="isEdit = !isEdit">{{ isEdit ? '完成' : '编辑' }}</view>
		</view>
		<view style="margin-top: 48rpx">
			<videoPreview
				:isDel="isEdit"
				:videoList="videoList"
				@delVideo="delVideo"
			></videoPreview>
		</view>

		<!-- 空图 -->
		<view class="empty_img" v-if="videoList.length === 0">
			<image :src="imgUrl + 'imgs/home/img_empty.png'" mode=""></image>
			<view>暂无内容请尽快上传~</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import { imgUrl } from '@/external/utils/imgUrl';
import configService from '@/external/service/config.service.js';
import videoPreview from '/components/upload/videoPreview.vue';
import HomeApi from '@/API/home/index.js';
import { onReady, onPageScroll, onReachBottom, onShow, onLoad } from '@dcloudio/uni-app';
const homeApi = new HomeApi();
onLoad((o) => {
	if (o.isSelf) {
		isSelf.value = JSON.parse(o.isSelf);
	}
	getList();
});
let isSelf = ref(true);
const uploadUrl = configService.uploadUrl;
const videoList = ref([]);
const isEdit = ref(false); //是否可删除

const uploadVideo = () => {
	uni.chooseVideo({
		sourceType: ['camera', 'album'],
		success: async function (res) {
			let result = await uploadFilePromise(res.tempFilePath);
			videoList.value = videoList.value.concat(result);
		}
	});
};

/**
 * 上传文件
 */
const uploadFilePromise = (filePath) => {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			formData: {
				fileType: 'video',
				fileDirType: 'hall'
			},
			url: uploadUrl,
			filePath,
			name: 'file',
			header: {
				// Authorization: uni.getStorageSync('ACCESS_TOKEN')
			},
			success: (res) => {
				videoList.value = [];
				setTimeout(() => {
					videoList.value.push(JSON.parse(res.data));
					// resolve(res.data);
					add();
				}, 1000);
			},
			fail: (err) => {
				uni.showToast({
					title: err.errMsg,
					icon: 'none'
				});
			}
		});
	});
};
const add = () => {
	homeApi
		.addHallVideoApi({
			hallId: uni.getStorageSync('hallId'),
			videoUrl: JSON.stringify(videoList.value)
		})
		.then((res) => {
			getList();
		})
		.catch(() => {});
};
const getList = () => {
	homeApi
		.getHallVideoListApi({
			hallId: uni.getStorageSync('hallId'),
			latestId: 0
		})
		.then((res) => {
			let arr = [];
			if (res.data.videoList != null) {
				res.data.videoList.forEach((ele) => {
					ele.videoUrl = JSON.parse(ele.videoUrl);
					ele.videoUrl.forEach((item) => {
						arr.push({
							videoId: ele.videoId,
							fileUrl: item.fileUrl,
							cover: item.cover
						});
					});
				});
				videoList.value = arr;
			} else {
				videoList.value = [];
			}
			console.log(videoList.value);
		})
		.catch(() => {});
};
const delVideo = (index) => {
	homeApi
		.deleteHallVideoApi({
			hallId: uni.getStorageSync('hallId'),
			videoId: videoList.value[index].videoId
		})
		.then((res) => {
			// add()
			getList();
			uni.showToast({
				icon: 'none',
				title: res.msg
			});
		})
		.catch(() => {});
	// videoList.value.splice(index, 1);
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.memoryVideo_uploadBtn {
	flex: 1;
	height: 96rpx;
	background: #f3e0bb;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
	line-height: 32rpx;
	letter-spacing: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;

	image {
		width: 48rpx;
		height: 48rpx;
		margin-right: 8rpx;
	}
}

.edit_box {
	width: 128rpx;
	height: 96rpx;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	border: 2rpx solid #f3e0bb;
	text-align: center;
	line-height: 96rpx;
	font-weight: 400;
	font-size: 32rpx;
	color: #f3e0bb;
}

.empty_img {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 10vh;
	width: 100%;
	font-weight: 400;
	font-size: 28rpx;
	color: #969da3;
	line-height: 28rpx;

	image {
		width: 460rpx;
		height: 360rpx;
		margin-bottom: 24rpx;
	}
}
</style>
